import { FC } from 'react';
import { Card, Table, Typography, Tag, Button } from 'antd';

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
    likes: ['篮球', '唱歌'],
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['篮球2', '唱歌2'],
  },
];

// todo 列信息
const columns = [
  {
    title: '姓名',
    // todo 对应显示哪一个字段
    dataIndex: 'name',
    // todo 第一个参数text表示字段对应的值
    render(text: string) {
      return (
        <Typography.Link>
          {text} - {text}
        </Typography.Link>
      );
    },
    width: 200,
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
  },
  {
    title: '爱好',
    dataIndex: 'likes',
    render(text: string[]) {
      return (
        <>
          {text.map((item, index) => (
            <Tag color="magenta" key={index}>
              {item}
            </Tag>
          ))}
        </>
      );
    },
  },
  {
    title: '操作',
    // todo record表示整一行的数据
    render(text: string, record: any) {
      return (
        <Button
          danger
          type="primary"
          onClick={() => {
            console.log(record);
          }}
        >
          删除
        </Button>
      );
    },
  },
];

const Index: FC = () => {
  return (
    <Card title="基础表格">
      <Table dataSource={dataSource} columns={columns} />
    </Card>
  );
};

export default Index;
